{% extends "base.html" %}
{% load static %}
{% block extra_head %}
<link rel="stylesheet" href="{% static 'css/t2.css' %}" />
{% endblock extra_head %}
{% block main %}
{% if user.is_authenticated %}



<div class="animation-wrapper">
  <div class="boat" style="background-image: url('https://i.postimg.cc/GmQTRnHD/boat2.png');"></div>
</div>



<section class="wrap">
  <div class="elmar">
    <div class="barco">
      <div class="puente">
        <div class="chimeneal">
          <div class="linea"></div>
        </div>
        <div class="chimenear">
          <div class="linea"></div>
        </div>
        <div class="franja"></div>
        <div class="camarote1">
          <div class="antiskew">
            <div class="ventana"></div>
            <div class="ventana"></div>
            <div class="ventana"></div>
            <div class="ventana"></div>
            <div class="ventana"></div>
            <div class="puertita"></div>
          </div>
        </div>
        <div class="radar">
          <div class="cabeza"></div>
          <div class="soporte"></div>
        </div>
        <div class="fantena"></div>
        <div class="santenea"></div>
        <div class="control">
          <div class="tapa">
            <div class="top-ventana"></div>
            <div class="top-ventana"></div>
            <div class="top-ventana"></div>
          </div>
          <div class="mid-ventana"></div>
          <div class="mid-ventana"></div>
          <div class="mid-ventana"></div>
          <div class="mid-ventana"></div>
          <div class="mid-ventana"></div>
          <div class="mid-ventana"></div>
          <div class="mid-ventana"></div>
          <div class="mid-ventana"></div>
          <div class="mid-ventana"></div>
          <div class="mid-ventana"></div>
          <div class="mid-ventana"></div>
          <div class="mid-ventana"></div>
          <div class="puertita"></div>
        </div>
        <div class="bajo-camarotes">
          <div class="ventanitas"></div>
          <div class="ventanitas"></div>
          <div class="ventanitas"></div>
          <div class="ventanitas"></div>
          <div class="ventanitas"></div>
          <div class="ventanitas"></div>
        </div>
      </div>
      <div class="base">
        <div class="atras"></div>
        <div class="popa"></div>
        <div class="tronco">
          <div class="marca">
            <div class="per"></div>
          </div>
        </div>
        <div class="proa"></div>
        <div class="anclacont"></div>
      </div>
      <div class="contenedores">
        <div class="contenedor">
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
        </div>
        <div class="contenedor">
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
        </div>
        <div class="contenedor">
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
        </div>
        <div class="contenedor">
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
        </div>
        <div class="contenedor">
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
        </div>
        <div class="contenedor">
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
        </div>
        <div class="contenedor">
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
        </div>
        <div class="contenedor">
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
        </div>
        <div class="contenedor">
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
        </div>
        <div class="contenedor">
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
        </div>
        <div class="contenedor">
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
        </div>
        <div class="contenedor">
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
          <div class="cal"></div>
        </div>
      </div>
    </div>
    <div class="agua">
    </div>

  </div>
</section>



<!-- Link to my website -->
<!-- <a id="ajerez" href="http://www.ajerez.es/en/" target="_blank"><img src="https://i.imgur.com/AI4BS2I.png" /></a> -->

<!-- css animation examples -->
<!-- https://codepen.io/ajerez/pen/EaEEOW -->

{% else %}
{% include "pcs_login.html" %}
{% endif %}
{% endblock %}
